<template>
  <fieldset>
    <legend>购物车</legend>
    <ul>
      <li v-for="item in products" :key="item.id">{{ item.title }}</li>
    </ul>
    <h1>{{ username }}</h1>
  </fieldset>
</template>

<script>
import { mapState,mapMutations  } from "vuex";
export default {
  mounted() {
    // store mutations中 已经声明请求 触发即可
    // this.$store.commit("GET_PRODUCT");
    // 触发 actions
    this.$store.dispatch("GET_PRODUCT", 20);
    // 访问模块化store中的state
    // 要开启命名空间 namespaced:true
    // 语法 this.$store.state.模块名字.模块中的名字
    console.log("username", this.$store.state.users.username);
  },
  computed: {
    ...mapState(["products"]),
    // 映射模块化store中的state
    // 语法： 1.模块名字 2.模块中映射的state属性
    ...mapState("users", ["username"]),
    ...mapState("car",["carts"])
  },
  created(){
    // 调用模块化 store 中的 mutations
    // 语法：commit("模块名字/mutations类型")
    // this.$store.commit("users/CHANGE_USERNAME")
    this.CHANGE_USERNAME()
     
  },
  methods:{
    ...mapMutations("users",["CHANGE_USERNAME"])
  }
};
</script>